import { useState } from "react";

const Demo = () =>
{
    const list = [
        <span>姓名：张三</span>,
        <span>性别：男</span>,
        <span>年龄：20</span>
    ];

    const [IsShow,SetIsShow] = useState(false);

    const PersonPhoto = () =>
    {
        if(IsShow === true)
        {
            return <img style={{width:'300px',height:'500px',objectFit:'cover'}} src="https://i.imgur.com/c2FlNhT.jpeg" alt="测试" />;
        }else{
            return <></>;
        }
    }

    const OnPhotoSHow = () =>
    {
        SetIsShow(true);
    }

    return (
        <>
            <h1>123</h1>

            <ul>
                {/* 注释 循环 */}
                {list.map((item,index) =>
                {
                    return (
                        <li key={index}>{ item }</li>
                    )
                })}
            </ul>

            <PersonPhoto />

            <br />

            <button onClick={OnPhotoSHow}>显示图片</button>
        </>
    )
}

export default Demo;